<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{ modelValue: string }>();

const emit = defineEmits<{
  (e: 'update:model-value', value: string): void;
}>();

const show = ref(false);
const currentDate = ref<string[]>([]);

const close = () => {
  show.value = false;
};

// 点击完成按钮时触发
const handleConfirm = () => {
  emit('update:model-value', currentDate.value[0]);
  close();
};

defineExpose({
  open() {
    show.value = true;
    if (props.modelValue) {
      currentDate.value = [props.modelValue];
    }
  },
});
</script>
<template>
  <van-popup v-model:show="show" round position="bottom" safe-area-inset-bottom>
    <van-date-picker
      v-model="currentDate"
      title="选择年月"
      :min-date="new Date(2020, 0, 1)"
      :max-date="new Date(2030, 5, 1)"
      :columns-type="['year']"
      @confirm="handleConfirm"
      @cancel="close"
    />
  </van-popup>
</template>
<style lang="less" scoped></style>
